<template>
  <div>
    <!-- 新增员工按钮 -->
    <div class="createStaff_btn">
      <el-button type="primary" @click="dialogFormVisible = true">新增员工</el-button>
    </div>
    <!-- 显示员工数据的table表格 -->
    <div class="stafftable">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="createTime"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="staffAcc"
          label="姓名"
          width="130"
        />
        <el-table-column
          prop="province"
          label="省份"
          width="130"
        />
        <el-table-column
          prop="city"
          label="市区"
          width="130"
        />
        <el-table-column
          prop="staffName"
          label="职位"
          width="130"
        />
        <el-table-column
          prop="roleName"
          label="角色"
          width="130"
        />
        <el-table-column
          prop="staffPhone"
          label="电话"
          width="250"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.state === '20'" type="text" size="medium" @click="lockStaffData(scope.row)">锁定</el-button>
            <el-button v-if="scope.row.state === '21'" type="text" size="medium" @click="unlockStaff(scope.row)">解锁</el-button>
            <el-button type="text" size="medium" @click="compileStaff(scope.row)">编辑</el-button>
            <el-button type="text" size="medium" @click="deleteStaff(scope.row)">删除</el-button>
            <el-button type="text" size="medium" @click="resetPassword(scope.row)">重置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑和新增员工弹窗 -->
    <div>
      <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" @close="closeDialog()">
        <el-form :model="form">
          <el-form-item label="员工名称" :label-width="formLabelWidth">
            <el-input v-model="form.staffAcc" autocomplete="off" maxlength="8" show-word-limit />
          </el-form-item>
          <el-form-item label="员工职位" :label-width="formLabelWidth">
            <el-input v-model="form.staffName" autocomplete="off" maxlength="8" show-word-limit />
          </el-form-item>
          <el-form-item label="电话号码" :label-width="formLabelWidth">
            <el-input v-model="form.phoneNumber" autocomplete="off" maxlength="11" show-word-limit @blur="checkPhone" />
          </el-form-item>
          <el-form-item label="员工角色" :label-width="formLabelWidth">
            <el-select v-model="form.RoleId" placeholder="请选择角色">
              <el-option v-for="i in RoleAry" :key="i.roleId" :label="i.roleName" :value="i.roleId" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-if="eventType === false" type="primary" :loading="createBtn" @click="createStaff()">确 定</el-button>
          <el-button v-if="eventType === true" type="primary" :loading="createBtn" @click="confirmCompile()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 重置密码弹窗 -->
    <div>
      <el-dialog title="重置密码" :visible.sync="pwdDialog" @close="closePwd()">
        <el-form :model="pwd">
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input v-model="pwd.password" autocomplete="off" maxlength="8" type="password" @blur="checkpwd()" />
          </el-form-item>
          <el-form-item label="确认密码" :label-width="formLabelWidth">
            <el-input v-model="pwd.checkpwd" autocomplete="off" maxlength="8" type="password" @blur="checkNewPwd()" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="pwdDialog = false">取 消</el-button>
          <el-button type="primary" :loading="createBtn" @click="resetPwd()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[5, 6]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { selectStaff, selectRole, insertStaff, lockstaff, unlockstaff, deleteStaff, confirmStaff, resetPwd } from '@/api/staff'
export default {

  name: 'Staff',
  data() {
    return {
      RoleAry: [], // 角色
      tableData: [], // 员工数组
      pageStart: 0, // 从哪里开始，用于分页
      pageEnd: 5, // 单页显示几条数据，用于分页
      total: 0, // 员工数据总数
      currentPage4: 1, // 从第几页开始显示
      dialogFormVisible: false, // 是否显示编辑和新增员工弹窗
      formTitle: '新增员工', // 表单标题
      form: {
        staffAcc: '',
        RoleId: '',
        phoneNumber: '',
        staffName: ''
      }, // 新增和编辑员工弹窗的表单信息
      formLabelWidth: '120px', // 表单单行的宽度
      createBtn: false, // 确定按钮的等待效果是否消失
      eventType: false, // 弹窗确定时间根据不同的按钮选择不同的事件进行提交
      pwdDialog: false, // 是否显示密码弹窗
      pwd: {
        password: '',
        checkpwd: ''
      } // 密码弹窗的表单信息
    }
  },
  mounted() {
    this.selectStaffAry()
    this.selectRoleData()
  },
  methods: {
    // 显示单行的数据
    handleClick(row) {
      console.log(row)
    },
    // 查询角色数据的方法
    async selectRoleData() {
      const res = await selectRole()
      if (res.code !== 200) return this.$message.error('获取角色列表失败')
      this.RoleAry = res.data
    },
    // 查询员工数据的方法
    async selectStaffAry() {
      const res = await selectStaff(this.pageStart, this.pageEnd)
      if (res.code !== 200) return this.$message.error('获取员工列表失败')
      this.tableData = res.data1
      this.total = res.data.length
    },
    // 显示每页几条数据
    handleSizeChange(val) {
      this.pageEnd = val
      this.selectStaffAry()
    },
    // 查看当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageStart = (val - 1) * this.pageEnd
      this.selectStaffAry()
    },
    // 关闭新增员工和编辑员工dialog的方法
    closeDialog() {
      this.form.staffAcc = ''
      this.form.RoleId = ''
      this.form.phoneNumber = ''
      this.form.staffName = ''
      this.createBtn = false
    },
    // 新增员工的方法
    async createStaff() {
      this.dialogFormVisible = true
      this.eventType = false
      this.formTitle = '新增员工'
      if (this.form.staffAcc === '' || this.form.RoleId === '' || this.form.phoneNumber === '' || this.form.staffName === '') {
        this.$message.error('输入框不能为空')
        this.dialogFormVisible = false
        this.createBtn = false
      } else {
        this.createBtn = true
        const res = await insertStaff(this.form.staffAcc, this.form.RoleId, this.form.phoneNumber, this.form.staffName)
        if (res.code === '200') {
          this.$message({
            message: '新增角色成功',
            type: 'success'
          })
          this.createBtn = false
          this.dialogFormVisible = false
          this.selectStaffAry()
        }
        if (res.code !== 200 && res.code === 20000) {
          this.$message.error('该用户已有职位')
          this.createBtn = false
          this.dialogFormVisible = false
        }
        if (res.code !== 200 && res.code === 404) {
          this.dialogFormVisible = false
          this.$message.error('新增员工失败')
        }
      }
    },
    // 手机号码的正则
    checkPhone() {
      const reg = /^1[3|4|5|7|8]\d{9}$/
      if (!reg.test(this.form.phoneNumber)) {
        this.form.phoneNumber = ''
        this.$message.error('手机号码格式错误')
      }
    },
    // 锁定员工的方法
    async lockStaffData(val) {
      this.$confirm('此操作将锁定该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        lockstaff(val.staffId)
        this.$message({
          message: '锁定员工成功',
          type: 'success'
        })
        this.selectStaffAry()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消锁定'
        })
      })
    },
    // 解锁员工的方法
    async unlockStaff(val) {
      this.$confirm('此操作将解锁该员工,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        unlockstaff(val.staffId)
        this.$message({
          message: '解锁员工成功',
          type: 'success'
        })
        this.selectStaffAry()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解锁'
        })
      })
    },
    // 删除员工的方法
    async deleteStaff(val) {
      this.$confirm('此操作将删除该员工,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteStaff(val.staffId)
        this.$message({
          message: '删除员工成功',
          type: 'success'
        })
        this.selectStaffAry()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑员工信息的方法
    compileStaff(val) {
      this.eventType = true
      this.dialogFormVisible = true
      this.form.RoleId = val.roleId
      this.form.phoneNumber = val.staffPhone
      this.form.staffAcc = val.staffAcc
      this.form.staffName = val.staffName
      this.form['staffId'] = val.staffId
      this.formTitle = '员工编辑'
    },
    // 确定编辑员工信息的方法
    async confirmCompile() {
      if (this.form.staffAcc === '' || this.form.RoleId === '' || this.form.phoneNumber === '' || this.form.staffName === '') {
        this.dialogFormVisible = false
        this.$message.error('输入框不能为空')
      } else {
        this.createBtn = true
        const res = await confirmStaff(this.form.staffAcc, this.form.RoleId, this.form.phoneNumber, this.form.staffName, this.form.staffId)
        if (res.code === 200) {
          this.$message({
            message: '编辑员工成功',
            type: 'success'
          })
          this.createBtn = false
          this.dialogFormVisible = false
          this.selectStaffAry()
        }
        if (res.code !== 200 && res.code === 20000) {
          this.$message.error('该用户已有职位')
          this.createBtn = false
          this.dialogFormVisible = false
        }
        if (res.code !== 200 && res.code === 404) {
          this.dialogFormVisible = false
          this.$message.error('编辑员工失败')
        }
      }
    },
    // 显示重置密码弹窗的方法
    resetPassword(val) {
      this.pwdDialog = true
      this.pwd['staffId'] = val.staffId
    },
    // 关闭重置密码弹窗的方法
    closePwd() {
      this.pwd.password = ''
      this.pwd.checkpwd = ''
      this.createBtn = false
    },
    // 新密码的正则校验
    checkpwd() {
      const reg = /^[0-9]*[1-9][0-9]*$/
      if (!reg.test(this.pwd.password)) {
        this.$message.error('密码格式错误')
        this.pwd.password = ''
      }
    },
    // 判断确认密码和新密码一致的方法
    checkNewPwd() {
      if (this.pwd.password !== this.pwd.checkpwd) {
        this.$message.error('新密码和确认密码不一致')
        this.pwd.checkpwd = ''
      }
    },
    // 确定重置密码的方法
    async resetPwd() {
      if (this.pwd.password === '' || this.pwd.checkpwd === '') {
        this.$message.error('输入框不能为空')
        this.pwdDialog = false
      } else {
        console.log(this.pwd)
        this.createBtn = true
        const res = await resetPwd(this.pwd.password, this.pwd.staffId)
        if (res.code === 200) {
          this.$message({
            message: '重置密码成功',
            type: 'success'
          })
          this.createBtn = false
          this.pwdDialog = false
          this.selectStaffAry()
        }
        if (res.code !== 200 && res.code === 20000) {
          this.$message.error('新密码和旧密码不能一致')
          this.createBtn = false
          this.pwdDialog = false
        }
        if (res.code !== 200 && res.code === 404) {
          this.pwdDialog = false
          this.$message.error('重置密码失败')
        }
      }
    }
  }
}
</script>

<style lang="scss">

.createStaff_btn{
  margin: 20px;
  margin-left: 30px;
}

.stafftable{
  width: 95%;
  margin: auto;
}

.block{
  margin-top: 15px;
  margin-left: 30px;
}

</style>
